<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{ card.name }}</span>
      <el-popover v-model="deleteVisible" placement="top" width="160">
        <p>
          确定{{ card.delete ? '永久' : '' }}删除该板块吗？{{
            card.delete ? '删除后板块下所属分类和新闻将一并删除。' : ''
          }}
        </p>
        <div style="text-align: right; margin: 0;">
          <el-button size="mini" type="text" @click="deleteVisible = false">
            取消
          </el-button>
          <el-button type="primary" size="mini" @click="deleteCard">
            确定
          </el-button>
        </div>
        <el-button
          slot="reference"
          style="float: right; padding: 3px 0; margin-left: 10px;"
          type="text"
          class="class--delete"
        >
          删除
        </el-button>
      </el-popover>
      <el-popover v-model="moveVisible" placement="top" width="320">
        <div>请选择要交换的板块</div>
        <el-table
          :show-header="false"
          :data="noDeleteCard"
          style="width: 100%;"
        >
          <el-table-column prop="number">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column prop="number" width="50">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                :disabled="index === scope.$index"
                @click="changeCard(index, scope.$index)"
              >
                交换
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right; margin: 0;">
          <el-button size="mini" type="text" @click="moveVisible = false">
            取消
          </el-button>
        </div>
        <el-button
          v-show="!card.delete"
          slot="reference"
          style="float: right; padding: 3px 0; margin-left: 10px;"
          type="text"
        >
          移动
        </el-button>
      </el-popover>
      <el-button
        v-show="!card.delete"
        style="float: right; padding: 3px 0;"
        type="text"
        @click="add"
      >
        添加
      </el-button>
      <el-popover v-model="recoverVisible" placement="top" width="160">
        <p>确定恢复该板块吗？</p>
        <div style="text-align: right; margin: 0;">
          <el-button size="mini" type="text" @click="recoverVisible = false">
            取消
          </el-button>
          <el-button type="primary" size="mini" @click="recover">
            确定
          </el-button>
        </div>
        <el-button
          v-show="card.delete"
          slot="reference"
          style="float: right; padding: 3px 0;"
          type="text"
          class="class--recover"
        >
          恢复
        </el-button>
      </el-popover>
    </div>
    <el-table :data="noDeleteMap" style="width: 100%;" :show-header="false">
      <el-table-column prop="name" />
      <el-table-column v-if="!card.delete" width="84">
        <template slot-scope="scope">
          <MapEdit
            :item="scope.row"
            :all-map="card.map"
            :index="scope.$index"
            @moveMap="moveMap"
            @deleteMap="deleteMap"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import MapEdit from './mapEdit'
export default {
  components: { MapEdit },
  props: {
    index: {
      type: Number,
      default: 0
    },
    card: {
      type: Object,
      default: () => {
        return {}
      }
    },
    allClass: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    }
  },
  data() {
    return {
      recoverVisible: false,
      moveVisible: false,
      deleteVisible: false
    }
  },
  computed: {
    noDeleteCard() {
      return this.allClass.filter((item) => {
        return !item.delete
      })
    },
    noDeleteMap() {
      return this.card.map.filter((item) => {
        return !item.delete
      })
    }
  },
  methods: {
    add() {
      const self = this
      this.$prompt('请输入新添加的分类名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          this.$emit('add', self.index, value)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    },
    deleteCard() {
      this.$emit('delete', this.index)
      this.deleteVisible = false
    },
    changeCard(index1, index2) {
      this.$emit('change', index1, index2)
      this.moveVisible = false
    },
    recover() {
      this.$emit('recover', this.index)
      this.recoverVisible = false
    },
    moveMap(index1, index2) {
      this.$emit('moveMap', this.index, index1, index2)
    },
    deleteMap(index) {
      this.$emit('deleteMap', this.index, index)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.text {
  font-size: 14px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 20px;
  width: 480px;
}
.class--recover,
.class--delete {
  color: #999;
}
</style>
